<template>
  <div>
    <!-- 模糊 -->
    <el-row>
      时间选择：
      <el-button type="primary" size="mini" plain @click="allDay()">全部</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(1)">今天</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(2)">昨天</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(3)">最近7天</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(4)">最近30天</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(5)">本月</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(6)">本年</el-button>
      <el-date-picker v-model="bargainItemTableSearchVo.dateTime" value-format="yyyy-MM-dd HH:mm:ss" type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-row>

    砍价状态:
    <template>
      <el-select v-model="bargainItemTableSearchVo.status" placeholder="请选择商品状态">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>

    <el-button type="primary" round @click="getBargainList()">查询</el-button>

    <!-- 表格 -->
    <template>
      <el-table :data="bargainList" border style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="imgUrl" label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt="未加载到图片" width="100px" height="100px" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="砍价商品名称"> </el-table-column>
        <el-table-column prop="intro" label="商品介绍"> </el-table-column>
        <el-table-column prop="bargainPrice" label="砍价价格">
        </el-table-column>
        <el-table-column prop="sumCount" label="总砍价次数"> </el-table-column>
        <el-table-column prop="residueCount" label="剩余次数">
        </el-table-column>
        <el-table-column prop="startTime" value-format="yyyy-MM-dd HH:mm:ss" label="开始时间"> </el-table-column>
        <el-table-column prop="endTime" value-format="yyyy-MM-dd HH:mm:ss" label="结束时间"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">
              开始中
            </span>
            <span v-if="scope.row.status==2">
              活动结束参与失败
            </span>
            <span v-if="scope.row.status==3">
              活动参与成功
            </span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 1" @click="seeDetails(scope.row.id)" type="text" size="small">查看详情
            </el-button>
            <el-button v-if="
                scope.row.status == 0 ||
                scope.row.status == 2 ||
                scope.row.status == 3
              " @click="del(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="详情" :visible.sync="detailsTableVisible">
      <el-table :data="details">
        <el-table-column property="id" label="用户id"></el-table-column>
        <el-table-column property="imgUrl" label="用户头像">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt="未加载到图片" width="100px" height="100px" />
          </template>
        </el-table-column>
        <el-table-column property="userName" label="用户名称"></el-table-column>
        <el-table-column property="bargainPrice" label="砍价金额"></el-table-column>
        <el-table-column value-format="yyyy-MM-dd HH:mm:ss" property="bargainTime" label="砍价时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data () {
    //这里存放数据
    return {
      token: "",
      bargainItemTableSearchVo: {
        limit: 10,
        page: 1,
      },
      bargainList: [],
      details: [],
      detailsTableVisible: false,
      total: 0,
      options: [
        {
          value: "",
          label: "请选择评价状态",
        },
        {
          value: "0",
          label: "未开始",
        },
        {
          value: "1",
          label: "参与中",
        },
        {
          value: "2",
          label: "活动结束参与失败",
        },
        {
          value: "3",
          label: "活动参与成功",
        },
      ],
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    //列表
    getBargainList () {
      this.$http
        .post(
          "http://localhost:8001/coco/bargain/item/search",
          this.bargainItemTableSearchVo,
          {
            headers: {
              token: this.token,
              type: "1",
            },
          }
        )
        .then(({ data }) => {
          if (data.code != 0) {
            this.$message({
              message: data.message,
              type: "error",
            });
            this.$router.push("/");
          }
          this.bargainList = data.data.rows;
          this.total = data.data.total;
        })
        .catch((err) => { });
    },
    //获取全部
    allDay () {
      this.bargainItemTableSearchVo.dateTime = null;
      this.bargainItemTableSearchVo.day = 0;
      this.getBargainList();
    },
    //按时间查询
    zjDay (num) {
      this.bargainItemTableSearchVo.day = num;
      this.bargainItemTableSearchVo.dateTime = null;
      this.getBargainList();
    },
    //删除
    del (id) {
      this.$http
        .delete("http://localhost:8001/coco/bargain/item/deleteById/" + id, {
          headers: {
            token: this.token,
            type: "1",
          },
        })
        .then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              message: "删除成功!",
              type: "success",
            });
          } else {
            this.$message.error("删除失败!");
          }
          this.getList();
        })
        .catch((err) => { });
    },
    //查看详情
    seeDetails (id) {
      //展开详情列表
      this.detailsTableVisible = true;
      //获取详情信息
      this.$http
        .get("http://localhost:8001/coco/bargain/item/seeDetails/" + id, {
          headers: {
            token: this.token,
            type: "1",
          },
        })
        .then(({ data }) => {
          if (data.code != 0) {
            this.$message({
              message: data.message,
              type: "error",
            });
            this.$router.push("/");
          }
          this.details = data.data;
        })
        .catch((err) => { });
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created () {
    this.token = localStorage.getItem("token");
    this.getBargainList();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>